<template>
  <div class="list-container">
    <a-list item-layout="horizontal" :data-source="userInfo" size="large">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta
              description="Ant Design, a design language for background applications, is refined by Ant UED Team">
            <template #title>
              <!--							<a href="https://www.antdv.com/">{{ item.title }}</a>-->
              <a>业主：{{ item.title }}</a>
              <a>职业：{{ item.name }}</a>
              <a>年薪：{{ item.age }}w</a>
            </template>
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random"/>
            </template>
          </a-list-item-meta>
        </a-list-item>

<!--        <div :style="{ background: 'rgb(190, 200, 200)', padding: '16px 16px' }">-->
          <a-space style="margin-right: 1000px">
            <a-button  type="primary"  @click="truncate(item.title)" ghost>Primary</a-button>
          </a-space>
<!--        </div>-->
      </template>
    </a-list>
  </div>
</template>


<script setup>
import {getCurrentInstance, h, ref} from 'vue';
import {notification} from "ant-design-vue";
import {SmileOutlined} from "@ant-design/icons-vue";

const currentBranch = ref('两块五');
const response = ref('');
const {proxy, ctx} = getCurrentInstance();

function truncate(values) {
  try {
    // proxy.$api.get('/data/demo01', {id: '123'}).then((res) => {
    //   console.log(res);
    //   console.log(res.name);
    //   msessage.success();
    // });
    notification.open({
      message: '登录成功',
      description: '欢迎业主' + values + ' 回家~! 为业主保驾护航！！',
      icon: () => h(SmileOutlined, {style: 'color: #108ee9'})
    });
  } catch (error) {
    console.error(error);
  }
}

const userInfo = ref([
  {
    title: '西瓜老板',
    name: '张三',
    age: 18
  },
  {
    title: '菠萝老板',
    name: '张三',
    age: 18
  },
  {
    title: '水蜜桃老板',
    name: '张三',
    age: 18
  },
  {
    title: '香蕉老板', name: '张三',
    age: 18
  }
]);
</script>

<style scoped>
.list-container {
  max-width: 600px; /* 设置合适的宽度 */
  margin: 0 auto; /* 居中显示 */
}
</style>
